<template>
   <div>
    <h1>Vue综合案例</h1>
     <table border="1">
            <tr><th>序号</th><th>姓名</th> <th>年龄</th> <th>性别</th> <th>操作</th>
            </tr>
            <tr v-for="(person, i) in list" v-bind:key="i">
                <td>{{i++}}</td>
                <td>{{person.name}}</td>
                <td>{{person.age}}</td>
                <td>{{person.sex}}</td>
                <td>
                    <!-- <a href="#" @click="Update(person)">编辑</a> -->
                     <a @click="Update(person)">编辑</a>
                     <!-- <a href="#" @click="Delate">删除</a> -->
                     <a @click="Delate(i)">删除</a>
                </td>
            </tr>
     </table>
     姓名 <input type="text" v-model="person.name"><br>
     年龄 <input type="number" v-model="person.age"><br>
     性别 <input type="text" v-model="person.sex"> <br>
     <button @click="add">添加</button>
   </div>
</template>

<script>
export default {
    name:"anli",
    data(){ // model数据模型
        return {
            list:[{name:'若泽', age: 12, sex:'男'},
                 {name:'弘一', age: 12, sex:'男'}],
            person:{
                    name:'',
                    age:'',
                    sex:''
                  }
        }
    },
    methods: {
        // 添加
        add(){
         // 添加
          this.list.unshift(this.person)
        // 添加完了之后清空一下输入空
          this.person={} // 清空
        },
        //修改
        Update(a){ // 把对应行的数据给他就行了对应行的对象给我就行了
            this.person = a
            //  console.log(a);
        },
        // 删除
        Delate(b) { //先拿到当前的集合 b代表当前行的下标
            this.list.splice(b, 1)
        }
    },
}
</script>

<style>

</style>